<template>
  <div class="Articlefl maincon">
    <!-- 搜索 -->
    <el-card shadow="hover" class="topsearch">
      <el-row>
        <el-form :inline="true" ref="types" >
          <el-form-item label="菜谱搜索">
            <el-input
                size="small"
                v-model="name"
                placeholder="输入发布人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getAll"
            >搜索</el-button
            >
            <el-button size="small" icon="el-icon-refresh" @click="resetForm"
            >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <!-- table -->
    <el-card shadow="hover" class="treetable">
      <el-table
          v-loading="loading"
          element-loading-text="耗尽脑汁加载中"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="标题" width="150">
        </el-table-column>
        <el-table-column label="描述" align="content" >
          <template slot-scope="scope">
            <el-button type="primary" plain @click="view(scope.row.content)">详细内容</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="发布人"> </el-table-column>
        <el-table-column prop="time" label="添加时间"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">审核<i class="el-icon-edit" ></i></el-button>
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
            >
              <el-button type="text" style="margin-left: 10px;color: #ff6464" slot="reference">删除<i class="el-icon-close"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5,10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="25%"
    >
      <div style="vertical-align: middle;text-align: center;">
        <template >
          <el-radio v-model="radio" label="0">通过</el-radio>
          <el-radio v-model="radio" label="2">未通过</el-radio>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSave">确 定</el-button>
  </span>
    </el-dialog>


    <!--    文章预览框-->
    <el-dialog title="菜谱预览" :visible.sync="viewDialogVis" width="60%" >
      <el-card>
        <div>
          <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
              index
          />
        </div>
      </el-card>
    </el-dialog>
  </div>
  <!--  预览窗口-->
</template>

<script>
import request from "@/router/request";

export default {
  name: "Contributionlist",
  data(){
    return{
      form:{},
      radio:"",
      name:"",
      cover:1,
      total:0,
      pageNum:1,
      pageSize:5,
      viewDialogVis: false,
      dialogVisible: false,
      tableData: [],
    }
  },
  created() {
    this.getAll()
  },
  methods:{
    //查询所有
    getAll(){
      request.get("/article/pageCoverSreach",{
        params:{
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          name:this.name,
          cover:this.cover
        }
      }).then(res=>{
        this.tableData=res.data.records
        this.total = res.data.total
      })
    },
    //查看详情
    view(content) {
      console.log(content)
      this.content = content
      this.viewDialogVis = true
    },
    // 重置
    resetForm() {
      this.name = null;
      this.getAll()
    },

    //修改弹窗
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row)),//赋予数据
          console.log("获取到的数据为："+this.form)
      this.dialogVisible = true//打开
    },

    handleSave(){
      this.form.cover=this.radio
      const form = this.form
      console.log("此文章用户的id为"+this.form)
      request.put("/article",form).then(res =>{
        console.log(res)
        if(res){
          this.$message.success("审核成功！")
        }else{
          this.$message.error("审核遇上未知异常！审核失败")
        }
        this.dialogVisible = false,
            this.form = {}
        this.getAll()
      })
    },

    //删除
    handleDelete(id){
      request.delete("/article/"+id).then(res =>{
        if(res){
          this.$message.success("删除成功！")
        }else{
          this.$message.error("删除失败！")
        }
        this.getAll()
      })
    },

    //分页
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      //之后请求数据
      this.getAll()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum
      this.getAll()
    },
  },
}
</script>

<style lang='scss' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.Articlefl {
  .topsearch {
    height: 15%;
    .el-form-item {
      // margin-bottom: 0;
    }
  }
  .treetable {
    margin-top: 20px;
    height: calc(100% - 15% - 20px);
    // max-height: calc(90% - 20px);
    overflow-y: auto;
    // padding-bottom: 50px;

    ::v-deep .el-table .myNoteBox .cell {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    .clearfix {
      span {
        font-weight: bold;
      }
    }
  }

  ::v-deep .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__body {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              .quill-editor {
                .ql-container {
                  height: 200px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
